<template>
  <j-modal
    :title="title"
    :visible="visible"
    :width="modalWidth"
    cancelText="关闭"
    style="top:50px"
    switchFullscreen
    @cancel="close"
    @ok="handleSubmit"
  >
    <a-spin :spinning="false" tip="Loading...">
      <a-row v-if="visible" :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
        <a-col :md="12" :sm="24">
          <a-card :bordered="false">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :span='7'>
                  <a-form-item label="">
                    <a-input v-model="queryParam.terminalCode" placeholder="门店编码"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span='7'>
                  <a-form-item label="">
                    <a-input v-model="queryParam.terminalName" placeholder="门店名称"></a-input>
                  </a-form-item>
                </a-col>
<!--                <template v-if="toggleSearchStatus">-->
<!--                  <a-col :span='7'>-->
<!--                    <a-form-item label="">-->
<!--                      <a-input v-model="queryParam.dqOrgName" placeholder="请输入大区"></a-input>-->
<!--                    </a-form-item>-->
<!--                  </a-col>-->
<!--                  <a-col :span='7'>-->
<!--                    <a-form-item label="">-->
<!--                      <a-input v-model="queryParam.provinceOrgName" placeholder="请输入省区"></a-input>-->
<!--                    </a-form-item>-->
<!--                  </a-col>-->
<!--                  <a-col :span='7'>-->
<!--                    <a-form-item label="">-->
<!--                      <a-input v-model="queryParam.cityOrgName" placeholder="请输入城市"></a-input>-->
<!--                    </a-form-item>-->
<!--                  </a-col>-->
<!--                </template>-->

                <a-col :span='7'>
                      <span class="table-page-search-submitButtons" style="float: left;overflow: hidden;">
                        <a-button icon="search" type="primary" @click="searchQuery">查询</a-button>
                        <a-button icon="reload" style="margin-left: 5px" type="primary" @click="searchReset">重置</a-button>
<!--                        <a style="margin-left:10px" @click="handleToggleSearch">-->
<!--                          {{ toggleSearchStatus ? '收起' : '展开' }}-->
<!--                          <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
<!--                        </a>-->
                      </span>
                </a-col>

              </a-row>
            </a-form>
            <a-table
              ref="table"
              :columns="dataColumns.slice(0,-1)"
              :dataSource="allData"
              :loading="loading"
              :pagination="ipagination"
              :rowSelection="{selectedRowKeys: selectedRowKeys, onSelect: onSelect,onSelectAll:onSelectAll}"
              :scroll="{
          x:'max-content'
        }"
              bordered
              rowKey="terminalCode"
              size="middle"
              tableLayout="auto"
              @change="handleTableChange"
            >
              <template slot="imgUrl" slot-scope="text, record, index">
                <div class="anty-img-wrap">
                  <a-avatar :src="record.imgUrl" icon="user" shape="square"/>
                </div>
              </template>

              <template slot="status" slot-scope="text">{{ text | isActiveStatus }}</template>
            </a-table>

          </a-card>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-card :bordered="false">
            <a-table
              ref="table"
              :columns="dataColumns"
              :dataSource="selectData"
              :scroll="{
          x:'max-content'
        }"
              bordered
              rowKey="terminalCode"
              size="middle"
              tableLayout="auto"
            >

              <template slot="status" slot-scope="text">{{ text | isActiveStatus }}</template>

              <template slot="action" slot-scope="text, record, index">
                <a @click="handleDelete(record)">删除</a>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </j-modal>
</template>

<script>
import {filterObj} from '@/utils/util'
import {getAction, postAction} from "@/api/manage";
import JInput from '@/components/cn-form/JInput.vue'
import {PageListMixin} from '@/mixins/PageListMixin'

export default {
  name: 'act-term-modal',
  mixins: [PageListMixin],
  components: {JInput},
  props: ['modalWidth', 'multi', 'userIds'],
  data() {
    return {
      typeLoading:false,
      queryParam: {
        terminalCode: "",
        terminalNmae: "",
      },
      allData:[],
      selectData:[],
      dataColumns: [

        {
          title: '门店编码',
          align:"center",
          dataIndex: 'terminalCode'
        },
        {
          title: '门店名称',
          align:"center",
          dataIndex: 'terminalName'
        },
        {
          title: '省',
          align:"center",
          dataIndex: 'province'
        },
        {
          title: '市',
          align:"center",
          dataIndex: 'city'
        },
        {
          title: '区',
          align:"center",
          dataIndex: 'area'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          width: 80,
          ellipsis: true,
          scopedSlots: {customRender: 'action'},
        },
      ],
      scrollTrigger: {},
      selectedRowKeys: [],
      title: '门店清单选择',
      selectedKeys: [],
      visible: false,
      form: this.$form.createForm(this),
      loading: false,
      expandedKeys: [],
      reqCode: '',
      activeKey: '1',
      url: {
        list:   window._CONFIG['domianURL'] + '/cnTerminalController/custFindTerminalList',
        // selected:  window._CONFIG['domianTpmURL'] + '/act/tpmActSpecialDetail/findPageList'
      },
      record:null
    }
  },

  computed: {
    // 计算属性的 getter
    getType: function () {
      return this.multi == true ? 'checkbox' : 'radio';
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$nextTick(()=>{
          this.loadData()
        })
      }
    },

    // reqCode() {
    //   this.getSelectdData()
    // }
  },
  created() {
    // 该方法触发屏幕自适应
    this.resetScreenSize();
  },
  methods: {
    /**
     * 获取已选中数据
     */
    getSelectdData() {
      postAction(this.url.selected, {tempUuid: this.reqCode}).then(res => {
        const {result} = res
        this.record = result
        if (result && result && result.length) {
          const actselect = result
          this.selectedKeys = actselect.map(type => type.terminalCode)
          this.selectedRowKeys = actselect.map(row => row.terminalCode);
          this.selectionRows = actselect
        }
      })
    },

    /**
     * 删除已选中活动
     * @param record
     */
    handleDelete(record) {
      this.selectData.remove(record)
      this.selectionRows.remove(record)
      this.selectedRowKeys.remove(record['terminalCode'])
    },
    /**
     * 覆盖mixin的loadData方法
     * @param arg
     * @returns {Promise<void>}
     */
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.loading = true
      let params = this.getQueryParams()//查询条件
      await postAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.allData = res.result.records
          this.ipagination.total = res.result.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.scrollTrigger = {x: 800};
      } else {
        this.scrollTrigger = {};
      }
    },
    showModal(tempUuid) {
      this.visible = true;
      this.reqCode = tempUuid
    },
    /**
     * 获取查询参数
     * @returns {*}
     */
    getQueryParams() {
      let param = Object.assign({}, this.queryParam);
      param.current = this.ipagination.current;
      param.size = this.ipagination.pageSize;
      return filterObj(param);
    },
    searchReset(num) {
      let that = this;
      if (num !== 0) {
        this.queryParam = []
        that.loadData(1);
      }
      that.selectedRowKeys = [];
      that.selectionRows = [];
      that.selectedKeys = [];
      that.selectData = []
    },
    close() {
      this.searchReset(0);
      this.visible = false;
    },
    handleSubmit() {
      let that = this;
      that.$emit('ok', that.selectData);
      that.searchReset(0)
      that.close();
    },
    /**
     * 手动全选/取消全选活动
     * @param selected
     * @param selectedRows
     * @param changeRows
     */
    onSelectAll(selected, selectedRows, changeRows) {
      this.selectedRowKeys = selectedRows.map(row => row.terminalCode);
      this.selectionRows = selectedRows
      if (selected) {
        //todo 选中
        changeRows.map(row => {
          this.selectData.push(row)
        })
      } else {
        //todo 取消选中
        changeRows.map(row => {
          this.selectData.remove(row)
        })
      }
    },

    /**
     * 手动勾选/取消活动
     * @param record
     * @param selected
     * @param selectedRows
     * @param nativeEvent
     */
    onSelect(record, selected, selectedRows, nativeEvent) {
      this.selectedRowKeys = selectedRows.map(row => row.terminalCode);
      this.selectionRows = selectedRows
      if (selected) {
        //todo 选中
        this.selectData.push(record)
      } else {
        //todo 取消选中
        this.selectData.remove(record)
      }


    },
    onSearch() {
      this.loadData(1);
    },
    modalFormOk() {
      this.loadData();
    },

  }
}
</script>

<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}
</style>
